<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>代码可视化生成器</title>
    <link rel="shortcut icon" href="favicon.ico" />
    <link rel="stylesheet" href="./layui/css/layui.css">
</head>
<body>
<div class="layui-layout-admin layui-layout">
    <div class="layui-header" style="background-color:black;">
        <ul class="layui-nav layui-layout-right" lay-bar="disabled">
            <li class="layui-nav-item" lay-header-event="menuRight" style="margin-right: 20px">
                <i class="layui-icon layui-icon-addition"></i>
            </li>
        </ul>
    </div>
    <div class="layui-side layui-bg-black">
        <div style="padding-left:20px;line-height: 50px">
            数据库连接
        </div>
        <ul class="layui-nav layui-nav-tree" id="linked">
        </ul>
    </div>
    <div class="layui-body">
        <div class="layui-panel" style="margin: 20px;">
            <div style="padding: 20px">
                <button type="button" class="layui-btn layui-btn-disabled" id="generate" disabled>生成</button>
            </div>
        </div>
        <div class="layui-panel" style="margin: 20px;">
            <div style="padding: 20px">
                <table id="demo" lay-filter="test"></table>
            </div>
        </div>
    </div>

</div>


<div id="database" hidden>
    <div style="width:500px;margin: 70px">
        <form class="layui-form" lay-filter="database">
            <div class="layui-form-item">
                <label class="layui-form-label">连接名称:</label>
                <div class="layui-input-block">
                    <input type="text" name="name" id="name" placeholder="连接名称"
                           autoComplete="off" class="layui-input" lay-verify="required">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">数据库类型</label>
                <div class="layui-input-block">
                    <select name="dbType" lay-filter="type" id="dbType">
                        <option value="MySql8">Mysql8</option>
                        <option value="MySql5">Mysql5</option>
                        <!--                        <option value="DM">达梦</option>-->
                        <!--                        <option value="Oracle">Oracle</option>-->
                    </select>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">配置方式</label>
                <div class="layui-input-block">
                    <select name="flag" lay-filter="flag" id="flag">
                        <option value="1">使用application.yml的配置</option>
                        <option value="2">手动输入</option>
                    </select>
                </div>
            </div>
            <div id="edit" hidden>
                <div class="layui-form-item">
                    <label class="layui-form-label">主机地址:</label>
                    <div class="layui-input-block">
                        <input type="text" name="host" id="host" placeholder="主机地址"
                               autoComplete="off" class="layui-input" lay-blur="host">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">端口:</label>
                    <div class="layui-input-block">
                        <input type="text" name="port" id="port" placeholder="端口"
                               autoComplete="off" class="layui-input" lay-blur="port">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">数据库名:</label>
                    <div class="layui-input-block">
                        <input type="text" name="dbName" id="dbName" placeholder="数据库名"
                               autoComplete="off" class="layui-input" lay-blur="database">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">url:</label>
                    <div class="layui-input-block">
                        <input type="text" name="url" placeholder="url"
                               id="url" autoComplete="off" class="layui-input" lay-blur="url">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">用户名:</label>
                    <div class="layui-input-block">
                        <input type="text" name="username" id="username" placeholder="用户名"
                               autoComplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">密码:</label>
                    <div class="layui-input-block">
                        <input type="password" name="password" id="password" placeholder="密码"
                               autoComplete="off" class="layui-input">
                    </div>
                </div>
            </div>
            <div style="width:202px;margin: 0 auto">
                <button class="layui-btn layui-btn-primary" lay-submit lay-filter="test">测试链接</button>
                <button class="layui-btn" style="display: inline-block;width: 94px" lay-submit
                        lay-filter="connect">链接
                </button>
            </div>
        </form>
    </div>
</div>

<div id="generateForm" hidden>
    <div style="width:400px;  margin:70px">
        <form class="layui-form" lay-filter="generateForm">
            <div class="layui-form-item">
                <label class="layui-form-label" style="width:120px">生成到其他模块</label>
                <div class="layui-input-block">
                    <input type="radio" name="generateOther" value="1" title="是" lay-filter="generateOther" id="yes">
                    <input type="radio" name="generateOther" value="2" title="否" checked lay-filter="generateOther"
                           id="no">
                </div>
            </div>
            <div id="moduleSelect" hidden>
                <div class="layui-form-item">
                    <label class="layui-form-label">模块名:</label>
                    <div class="layui-input-block">
                        <select name="moduleName" id="moduleName" lay-filter="moduleName">
                            <option value="">请选择</option>
                        </select>
                    </div>
                </div>
            </div>
            <div style="width:202px;margin: 0 auto">
                <button class="layui-btn layui-btn-primary" lay-submit lay-filter="sure">确定</button>
                <button class="layui-btn" style="display: inline-block;width: 94px" lay-submit
                        lay-filter="cancel">取消
                </button>
            </div>
        </form>
    </div>
</div>
</body>
<script id="linkedArray" type="text/html">
    <ul>
        {{# layui.each(d, function(index, item){ }}
        <li class="layui-nav-item">
            <a href="javascript:">{{item.name}}</a>
            <div style="display: none">{{item.comment}}</div>
        </li>
        {{# }); }}
    </ul>
</script>


<script src="layui/layui.js"></script>
<script src="js/global.js"></script>
<script src="js/viewer.js"></script>

</html>